<template>
  <div style="height:430px;padding: 20px;" class="ml-5 mr-5">
    <div class="flex flex-col h-full" v-show="status==0" >
      <a-list item-layout="horizontal" :data-source="preorderInfo.orderdetails" style="height:100px;padding-bottom:100rpx;">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="flex justify-between ml-3 mr-3" style="width:100%;">
                <div class="flex flex-1">
                  <div style="width:6em;height:4em;">
                      <img src="../../../assets/images/deecplogo.svg" v-if="!item.smallpic" style="width:4em;"/>
                      <img :src="'/js'+item.smallpic" v-if="item.smallpic" style="width:4em;"/>
                      
                  </div>
                  <div class="flex flex-col ml-2">
                    <span > 商品名称：{{item.title}}</span>
                    <span class="money-color text-lg mt-2">￥{{item.danjia}}</span>
                  </div>
                </div>
                <div class="flex m-2 items-center" >x1</div>
            </div>
          </a-list-item>
        </template>
      </a-list>
    
     <div class="flex flex-col " :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }" >
        <div class="flex w-full flex-col" style="padding:5px 32px">
          
           <div class="flex w-full justify-between">
             <span></span>
             <span><span style="color:#212123;font-family: Roboto;">合计：</span><span class="money-color text-lg">￥{{preorderInfo.jinger}}</span></span>
            </div>
             <div class="flex justify-between">
              <div> 
                <a-checkbox @change="checkboxChange">使用权益金抵扣</a-checkbox>
                  <span style="margin-left:1rem;">剩余&nbsp;&nbsp;<span class="money-color">￥{{preorderInfo.qyjmoney}}</span></span>
              </div>
              <span>-￥{{dikoujiner}}</span>
            </div>
             <div class="flex justify-between mb-2 mt-3">
              <div></div>
              <span><span style="color:#212123;font-family: Roboto;">需支付：</span><span class="money-color" style="font-size: 1.6em;">￥{{preorderInfo.jinger-dikoujiner}}</span></span>
            </div>
         
           
        </div>
         
        <div class="flex mt-5" style="padding-bottom: 12px;justify-content: end;">
          <a-button @click="backparent" style="width:120px;height: 36px;">取消</a-button>
          <a-button type="primary" @click="submitorder" :loading="submitOrdering" style="width:120px;height: 36px;margin-left: .5em;">提交订单</a-button>
        </div>
      </div>
    </div>

    <div id="payinfo" class="flex flex-col w-full" v-show="status==1">
        <div class="w-full flex justify-between  detail-item">
          <div class="flex">订单号</div>
          <div>{{payinfoData.outpayno}}</div>
        </div>
       
        <div class="flex justify-between detail-item">
          <span>订单金额</span>
          <span>{{payinfoData.jinger}}</span>
        </div>
        <div class="flex justify-between detail-item">
          <span>权益金抵扣金额</span>
          <span>{{payinfoData.dikoujiner}}</span>
        </div>
        <div class="flex justify-between detail-item">
          <span>需支付金额</span>
          <span>{{payinfoData.wxjiner}}</span>
        </div>
        <div class="flex justify-between detail-item">
          <span>支付方式</span>
          <span>微信支付</span>
        </div>
       
        <div class="flex justify-center">
          <QrCode :value="payinfoData.codeurl" />
        </div>
        
         <div class="flex justify-center" style="color:#BFBFBF">
          打开微信扫一扫，扫描上方二维码进行支付
        </div>
        <div class="flex justify-center mt-1" style="color:#BFBFBF">
          失效时间：{{ payinfoData.wxPayExpireTime }}
        </div>
        <div style="height: 32px;"></div>
    </div>

    <a-result
      status="success"
      title="支付成功!"
      sub-title="订单支付成功，感谢您的支持."
      v-show="status==2">
      <template #extra>
        <a-button key="console" type="primary" title="返回" @click="backparent">返回</a-button>
      </template>
    </a-result>
  </div>
</template>
<script lang="ts">
import { reactive,defineComponent,ref, onMounted } from 'vue';
import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
import { useMessage } from '/@/hooks/web/useMessage';
import { Checkbox,List,ListItem,Result } from 'ant-design-vue';
import { createOrder,queryOrder,getUserInfo } from '/@/api/dp/dpbaseapi';
import { useUserStore } from '/@/store/modules/user';
const { showMessage, notification } = useMessage();
export default defineComponent({
  name:'OrdercrateAndPay',
  
    components: {
      ACheckbox:Checkbox,
      AList:List,
      AListItem:ListItem,
      AResult:Result
    },
  
});
</script>

<script lang="ts" setup>
const userStore = useUserStore();
const props = defineProps({
    status:Number,
    preorderInfo:Object
});
onMounted(()=>{
  
});
const submitOrdering = ref(false);
const taskqueryorderInterval = ref(null);

const orderItems=ref([]);
const $emit = defineEmits(['orderpaysuccess','changeorderstatus'])

const formData = reactive({
    title: '',
    jinger: '',
    ordertype: '',
    dikoujiner: '',
    wxjiner: '',
    remarks:'',
  });

const payinfoData = ref({
    outpayno:'',
    jinger:0,
    dikoujiner:0,
    wxjiner:0,
    codeurl:'',
  });


const dikoujiner=ref(0);

 
function submitorder(){
   //changestatus(1);
   //组装参数,判断ordertype参数
   
   //提交订单api，接收返回参数
   apisubmitorder();

}

async function syncUserInfoFromServer(){
  let user = await getUserInfo();
  if(user) {
    userStore.setUserInfo(user);
  }
}

async function apisubmitorder(){
   try{
    //设置抵扣金额
    props.preorderInfo.dikoujiner=dikoujiner.value;
    props.preorderInfo.wxjiner=props.preorderInfo.jinger-dikoujiner.value;
    submitOrdering.value = true;
    const res = await createOrder(props.preorderInfo);
    if(res.createok=='0'){
      submitOrdering.value = false;
      showMessage(res.createerrmsg);
      return;
    }
    payinfoData.value=res;
    submitOrdering.value = false;
    //根据状态来跳转
    changestatus(res.frontorderstatus);
    if(res.frontorderstatus==1){
      taskqueryorderInterval.value = setInterval(() => {
        queryorderpay();
      }, 3000);
    }
   }catch(error: any){

   }finally{

   }
}


const queryorderpay = async () => {
  try {
    var req={outOrderId:payinfoData.value.outpayno};
   
    const response = await queryOrder(req);
    if(response.tradeState=='SUCCESS'){
      //支付成功
      if (taskqueryorderInterval.value) {
        clearInterval(taskqueryorderInterval.value);
      }

      await syncUserInfoFromServer();

      changestatus(2);

      $emit('orderpaysuccess');
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};
 
// 设置定时器每隔2秒钟调用一次fetchData函数


  const backparent = () => {
    $emit('orderpaysuccess');
    changestatus(0);
  }

  const changestatus = (v) => {
    $emit('changeorderstatus',v);
  }
  
  function checkboxChange(e){
    if(e.target.checked){
        //判断抵扣金额是否大于订单金额
        if(props.preorderInfo.qyjmoney>props.preorderInfo.jinger){
          dikoujiner.value=props.preorderInfo.jinger;

        }else{
           dikoujiner.value=props.preorderInfo.qyjmoney
        }
    }else{
         dikoujiner.value=0.0;
    }
    
  }
 
</script>
<style scoped>
.demo-loadmore-list {
  min-height: 350px;
}
.money-color {
  color: #FE6100;
}
.detail-item{
  padding:2px 5px;
}
  
</style>
